<style lang='scss' scoped>
.home {
  .home-search {
    padding: 8px;
    display: flex;
    .home-search_input-name {
      flex: 1;
      min-width: 1px;
      border: 1px solid #ccc;
      padding: 8px 8px;
      border-radius: 5px;
    }
    .home-search_sift {
      margin: 0 10px;
      width: 24px;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .popup-form {
      .popup-form_item {
        padding: 10px 20px;
        .title {
          margin-bottom: 8px;
        }
      }
      .uni-btn-v {
        display: flex;
        margin-top: 30px;
        button {
          width: 39%;
        }
      }
    }
  }
  .book-list {
    overflow: hidden;
  }
}
</style>
<template>
  <view class="home">
    <!-- 所有内容的容器 -->
    <div class="home-search">
      <input
        confirm-type="search"
        class="home-search_input-name"
        v-model="form.bookName"
        type="search"
        :border="true"
        placeholder="请输入书籍名称"
        @change="formSubmit"
      />

      <div class="home-search_sift" @click="showPopup = true">
        <image src="../../static/sift.png" mode="aspectFit" />
      </div>
      <u-popup v-model="showPopup" mode="right" width="80%">
        <form class="popup-form" @submit="formSubmit" @reset="formReset">
          <view class="popup-form_item" style="margin-top: 30px">
            <view class="title">书号</view>
            <view>
              <u-input
                class="home-search_input"
                v-model="form.bookNumber"
                :border="true"
                placeholder="请输入书号"
              />
            </view>
          </view>
          <view class="popup-form_item">
            <view class="title">出版社</view>
            <view>
              <u-input
                class="home-search_input"
                v-model="form.bookVersion"
                :border="true"
                placeholder="请输入出版社名称"
              />
            </view>
          </view>
          <view class="popup-form_item">
            <view class="title">主编</view>
            <view>
              <u-input
                class="home-search_input"
                v-model="form.bookAuthor"
                :border="true"
                placeholder="请输入主编名称"
              />
            </view>
          </view>
          <view class="uni-btn-v">
            <button type="primary" form-type="submit">提交</button>
            <button form-type="reset">重置</button>
          </view>
        </form>
      </u-popup>
    </div>
    <ul class="book-list">
      <li
        v-for="(item, index) in bookListShow"
        :key="index"
        class="c-book-piece"
        @click="viewBookDetail(item)"
      >
        <div class="cover-image">
          <image :src="item.img || '../../static/book.png'" mode="aspectFit" />
        </div>
        <div class="detail-box">
          <span class="title">{{ item.bookName }}</span>
          <span class="sub-title">
            <span class="sub-title-left">{{ item.bookVersion }}</span>
          </span>
          <span class="desc desc-line-3">{{ item.desc }}</span>
          <div class="footer-bar">
            <span class="sale-price">书号: {{ item.bookNumber || '-' }}</span>
            <span class="price">定价￥{{ item.bookPrice || '-' }}</span>
          </div>
          <div class="book-count">{{ item.bookAuthor }}</div>
        </div>
      </li>
      <u-empty v-if="!bookListShow.length" mode="search" />
    </ul>
    <u-loadmore :status="status" v-if="bookListShow.length" />
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
import * as api from '../../common/api.js'

export default {
  data() {
    return {
      loading: true,
      form: {
        bookName: '',
        bookNumber: '',
        bookVersion: '',
        bookAuthor: '',
        pageNum: 1,
        pageSize: 10
      },
      totalNum: 9,
      showPopup: false,
      status: 'loadmore',
      scrollTop: 0,
      bookListShow: []
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onReachBottom() {
    if (this.form.pageNum >= this.totalNum) return (this.status = 'nomore')
    this.status = 'loading'
    this.form.pageNum = ++this.form.pageNum
    if (this.form.pageNum > this.totalNum) this.status = 'nomore'
    else {
      this.getMore()
      this.status = 'loading'
    }
  },
  async mounted() {
    this.info = await api.getTeacher()
    wx.setStorageSync('schoolId', this.info.schoolId)
  },
  onLoad() {
    uni.startPullDownRefresh()
  },
  async onPullDownRefresh() {
    await this.getBookList()
    uni.stopPullDownRefresh()
  },
  methods: {
    async getBookList() {
      wx.showLoading({ title: '获取列表中...' })
      try {
        const res = await api.getBookList(this.form)
        this.totalNum = Math.ceil(res.total / this.form.pageSize)
        this.bookListShow = res.result
      } catch (e) {
        console.log(e)
        wx.showModal({
          title: '查询失败',
          content: '请稍后再试',
          showCancel: false,
          confirmText: '确定'
        })
      } finally {
        wx.hideLoading()
      }
    },
    async getMore() {
      const res = await api.getBookList(this.form)
      this.bookListShow = this.bookListShow.concat(res.result)
    },
    formSubmit() {
      this.showPopup = false
      this.getBookList()
    },
    formReset() {
      this.form = {
        bookName: '',
        bookNumber: '',
        bookVersion: '',
        bookAuthor: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getBookList()
    },
    viewBookDetail(item) {
      wx.navigateTo({
        url: `/pages/Home/ListDetail?bookItem=${JSON.stringify(item)}`
      })
    }
  }
}
</script>